<template>
    <n-modal v-model:show="isShowOutLogin">
        <n-card
            style="width: 638px;"
            :bordered="false"
            size="huge"
            role="dialog"
            aria-modal="true"
            class="login-card"
        > 
            <template #header>
                <div class="flex justify-end">
                    <n-icon class="cursor-pointer" :size="28" color="#000" :component="Close" @click="isShowOutLogin = false" />
                </div>
            </template>
            <div class="flex flex-col items-center mb-71px">
                <p class="text-2xl text-[#00102F] font-600 mb-32px">退出登录</p>
                <p class="text-xl text-[#00102F] mt-80px text-center">请注意，退出登录后，将清空所有操作记录和会话、图文等信息，确认是否继续退出</p>
            </div>
            <n-flex justify="center">
                <n-button class="w-140px h-48px" type="info" @click="isShowOutLogin = false">取消</n-button>
                <n-button class="w-140px h-48px sure-btn" text-color="#0063FF" color="rgba(0,99,255,0.1)" @click="doLogout">确认</n-button>
            </n-flex>
        </n-card>
    </n-modal>
</template>

<script lang="ts" setup>
    import { useUserStore } from "@/store/modules/user"
    import { Close } from "@vicons/ionicons5"

    const userStore = useUserStore()
    const isShowOutLogin = ref(false)

    const openModal = () => {
        isShowOutLogin.value = true
    }

    // 退出登录
    const doLogout = () => {
        userStore.doLogout()
        isShowOutLogin.value = false
    }

    defineExpose({
        openModal
    })
</script>

<style lang="scss" scoped>
.login-card {
    ::v-deep(.n-card-header) {
        padding: 16px;
    }

    ::v-deep(.n-tabs-bar) {
        height: 5px;
    }

    ::v-deep(.n-tabs-tab__label) {
        font-size: 17px;
    }

    .sure-btn {
        border: 1px solid #0063ff;
    }
}
</style>